<template>
<div class="searchTables" style="display: flex; width: 30%; margin-bottom: 10px;">
    <a-button type="primary" size="large" style="margin-right: 20px;" @click="showAddModal">新增</a-button>
    <a-input-search v-model:value="inputValue" placeholder="请输入类型名" enter-button="搜索" size="large" @search="getData" />
</div>
<a-modal v-model:visible="visibleAdd" title="新增类型" ok-text="确认" cancel-text="取消" :confirm-loading="confirmLoading" @ok="hideAddModal">
    <a-input v-model:value="value" size="large" placeholder="输入类型" />
</a-modal>
<a-modal v-model:visible="visibleUpdate" title="修改类型" ok-text="确认" cancel-text="取消" :confirm-loading="confirmLoading" @ok="hideUpdateModal">
    <a-input v-model:value="value" size="large" placeholder="输入类型" />
</a-modal>
<div class="table">
    <a-table :columns="columns" :data-source="data" @change="onChange">
        <template #headerCell="{ column }">
            <template v-if="column.key === 'name'">
                <span>
                    <smile-outlined />
                    ID
                </span>
            </template>
        </template>

        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'id'">
                {{ record.tuid }}
            </template>
            <template v-else-if="column.key === 'type'">
                <span>
                    <a-tag :key="record.type" :color=" 'cyan' ">
                        {{ record.type }}
                    </a-tag>
                </span>
            </template>
            <template v-if="column.key === 'createTime'">
                {{ record.createTime }}
            </template>
            <template v-else-if="column.key === 'action'">
                <span>
                    <a-button type="primary" @click="showUpdateModal(record.tuid, record.type)">修改</a-button>
                    <a-divider type="vertical" />
                    <a-button type="primary" danger @click="deleteData(record.tuid)">删除</a-button>
                </span>
            </template>
        </template>
    </a-table>
</div>
</template>

<script>
import {
    SmileOutlined,
    DownOutlined,
} from '@ant-design/icons-vue';
import API from '@/config/axiosInstance';
import {
    defineComponent,
    ref,
} from 'vue';
import {
    message
} from 'ant-design-vue';
const data = ref([{
    tuid: '1',
    type: "沃柑",
    createTime: ''
}, {
    tuid: '2',
    type: "小台芒",
    createTime: ''
}, {
    tuid: '3',
    type: "杏子",
    createTime: ''
}]);
export default defineComponent({
    inject: ['reload'],
    components: {
        SmileOutlined,
        DownOutlined,
    },
    setup() {
        const columns = [{
                title: "ID",
                key: 'id',
                dataIndex: 'tuid',
                sorter: (a, b) => a.tuid > b.tuid,
                width: 20
            }, {
                title: '类型',
                key: 'type',
                width: 200
            },
            {
                title: '创建时间',
                key: 'createTime',
                dataIndex: 'createTime',
                defaultSortOrder:'descend',
                sorter: (a, b) => {
                    const aTime = new Date(a.createTime).getTime(); // 需要先转换成时间戳
                    const bTime = new Date(b.createTime).getTime();
                    return aTime - bTime;
                },
            },
            {
                title: '操作',
                key: 'action',
            }
        ];

        const clickRow = ref("Title");
        const currRowIndex = ref(1)

        const visibleAdd = ref(false);
        const visibleUpdate = ref(false);
        const inputValue = ref("");
        const value = ref("")
        const confirmLoading = ref(false)
        const updateTuid = ref("")
        const updateType = ref("")
        return {
            currRowIndex,
            data,
            clickRow,
            columns,
            visibleAdd,
            visibleUpdate,
            inputValue,
            value,
            confirmLoading,
            updateTuid,
            updateType,
            onChange: (pagination, filters, sorter, extra) => {
            },
        };

    },
    created() {
        this.getList();
    },
    methods: {
        showAddModal() {
            this.visibleAdd = true;
        },
        hideAddModal() {
            this.addData()
        },
        showUpdateModal(tuid, type) {
            this.updateTuid = tuid
            this.value = type
            this.visibleUpdate = true;
        },
        hideUpdateModal() {
            this.updateData()
            this.visibleUpdate = false;
            this.value = ""
            this.reload()
            this.updateTuid = ''
            this.updateType = ''
        },
        addData() {
            API({
                method: 'post',
                url: '/type/add',
                params: {
                    'type': this.value
                }
            }).then(res => {
                if (res.data.resCode == '200') {
                    message.success('成功')
                }
                this.visibleAdd = false;
                this.value = ""
                this.reload()
            })
        },
        getList() {
            API({
                method: 'get',
                url: 'type/lists'
            }).then(res => {
                this.data = res.data.info
            })
        },
        deleteData(tuid) {
            API({
                method: 'post',
                url: 'type/delete',
                params: {
                    'tuid': tuid
                }
            }).then(res => {
                this.reload()
            })
        },
        updateData() {
            API({
                method: 'post',
                url: 'type/update',
                params: {
                    'tuid': this.updateTuid,
                    'type': this.value
                }
            }).then(res => {
                if (res.data.resCode == '200') {
                    message.success('成功')
                }
                this.reload()
            })
        },
        getData() {
            API({
                method: 'post',
                url: 'type/getOne',
                params: {
                    'type': this.inputValue
                }
            }).then(res => {
                if (res.data.resCode == '200') {
                    message.success('成功')
                    this.data = res.data.info
                }
            })
        }
    }
});
</script>
